<template>
  <div>
    <div class="whole_setion">
      <span>智能设备提货总量: </span>
      <span class="number_section">{{ wholeNumber }}</span> 台
      <span style="margin-left: 30px;">总激活量: </span>
      <span
        class="number_section"
        style="">{{ activate }}</span> 台
    </div>
    <div>
      <ve-histogram
        :judge-width="true"
        :data="chartData"
        :settings="chartSettings"
        :extend="extend"
        :text-style="textStyle"
        :legend="legend"
        :colors="colors"
      />
    </div>
  </div>
</template>

<script>
import commonMixin from '@/mixins/common'
export default {
  mixins: [ commonMixin ],
  data () {
    this.textStyle = {
      color: 'white'
    }
    this.colors = ['#ff69ec', '#00d4b8', '#2196F3']
    this.legend = {
      textStyle: {
        color: 'white',
        fontSize: 18
      }
    }
    this.chartSettings = {
      labelMap: {
        'smartShipmentMonth': '月提货量（台）',
        'activateIncMonth': '月激活数',
        'activeProportion6months': '激活率'
      },
      showLine: ['activeProportion6months'],
      // yAxisType: ['KMB'],
      yAxisName: ['数值', '激活率'],
      axisSite: { right: ['activeProportion6months'] },
      yAxisType: ['KMB', 'percent'],
      digit: 2,
      dataType: {
        'activeProportion6months': 'percent'
      },
      min: [400],
      max: [120000]
    }
    this.extend = {
      series: {
        label: {
          show: true,
          position: 'top',
          formatter: function (params) {
            if (params.seriesIndex === 0 || params.seriesIndex === 1) { // 0 为第0个
              let numData = params.data
              let num = (Math.floor(numData) / 10000).toFixed(1) + 'w'
              return num
            }
            if (params.seriesIndex === 2) { // 2 为第2个
              let data = params.data
              let str = (Math.floor(data * 10000) / 100) + '%'
              return str
            }
          }
        }
      },
      xAxis: {
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255, .6)'
          }
        }
      },
      yAxis: {
        splitLine: false,
        axisLabel: {
          formatter: function (params) {
            var str = params
            if (params <= 100) {
              str = params * 100 + '%'
            }
            if (params > 100) {
              str = (params / 10000) + 'w'
            }
            return str
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255, .6)'
          }
        }
      }
    }
    return {
      chartLoading: true,
      loading: false,
      chartData: {
        columns: ['month', 'smartShipmentMonth', 'activateIncMonth', 'activeProportion6months'],
        rows: [
          { 'month': '2019-01', 'smartShipmentMonth': 7000, 'activateIncMonth': 2000, 'activeProportion6months': 0.1 },
          { 'month': '2019-02', 'smartShipmentMonth': 9000, 'activateIncMonth': 2800, 'activeProportion6months': 0.1 },
          { 'month': '2019-03', 'smartShipmentMonth': 10000, 'activateIncMonth': 3888, 'activeProportion6months': 0.1 },
          { 'month': '2019-04', 'smartShipmentMonth': 18000, 'activateIncMonth': 4999, 'activeProportion6months': 0.6 },
          { 'month': '2019-05', 'smartShipmentMonth': 25000, 'activateIncMonth': 5100, 'activeProportion6months': 0.1 },
          { 'month': '2019-06', 'smartShipmentMonth': 36000, 'activateIncMonth': 5550, 'activeProportion6months': 0.1 },
          { 'month': '2019-07', 'smartShipmentMonth': 40000, 'activateIncMonth': 6000, 'activeProportion6months': 0.1 },
          { 'month': '2019-08', 'smartShipmentMonth': 43000, 'activateIncMonth': 5800, 'activeProportion6months': 0.1 },
          { 'month': '2019-09', 'smartShipmentMonth': 50000, 'activateIncMonth': 7000, 'activeProportion6months': 0.1 },
          { 'month': '2019-10', 'smartShipmentMonth': 52000, 'activateIncMonth': 8000, 'activeProportion6months': 0.1 },
          { 'month': '2019-11', 'smartShipmentMonth': 56000, 'activateIncMonth': 8500, 'activeProportion6months': 0.1 }
        ]
      },
      wholeNumber: '60,000',
      activate: '5000'
    }
  },
  created () {
    this.initDeviceInfo()
  },
  methods: {
    async initDeviceInfo () {
      let context = this
      this.loading = true
      let requestUrl = this.getApiUrl('datapanel/show/shipmentCollect', false)
      let { data: res } = await this.$http.get(requestUrl)
      if (res.code === 0 || res.code === 200) {
        context.loading = false
        let data = res.data
        context.chartData.rows = data.list
        context.chartLoading = false
        let sumNumber = data.total
        // for (var i = 0; i < data.length; i++) {
        //   sumNumber += parseInt(data[i].smartShipmentMonth)
        // }
        let num = parseFloat(sumNumber).toLocaleString()
        context.wholeNumber = num
        context.activate = data.activate
      }
    }
  }
}
</script>

<style>
.whole_setion{
  font-size: 22px;
  color: white;
}
.number_section{
  font-size: 34px;
  font-weight: bold;
  color: white;
}
</style>
